<template>
  <!-- 物品列表组件 -->
  <div class="items">
    <!-- 面包屑路径导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>世界管理</el-breadcrumb-item>
      <el-breadcrumb-item>物品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-tabs type="border-card" value="all" :before-leave="switchTag">
        <el-tab-pane label="全部" name="all">
          <el-row>
            <el-col :span="8">
              <div class="grid-content search-container">
                <el-input
                  placeholder="请输入内容"
                  v-model.trim="searchCont"
                  clearable
                  class="search-input"
                  @clear="searchClear"
                >
                </el-input>
                <el-button
                  type="info"
                  plain
                  icon="el-icon-search"
                  @click="getItemList"
                ></el-button>
              </div>
            </el-col>
          </el-row>
          <el-table :data="itemList" border stripe style="width: 100%">
            <!-- <el-table-column type="index" label="#" width="48"></el-table-column> -->
            <el-table-column
              prop="item_id"
              label="ID"
              width="80"
            ></el-table-column>
            <el-table-column label="图标" align="center">
              <template slot-scope="props">
                <div v-if="props.row.item_icon">
                  <el-image :src="path + props.row.item_icon">
                    <span slot="error">无</span>
                  </el-image>
                </div>
                <div v-else>
                  无
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="item_name" label="名称" width="100">
            </el-table-column>
            <el-table-column
              prop="item_desc"
              label="描述"
              width="200"
            ></el-table-column>
            <el-table-column prop="category" label="分类">
              <template slot-scope="props">
                <el-tag v-if="props.row.category == 1" size="mini">特殊</el-tag>
                <el-tag
                  type="success"
                  v-if="props.row.category == 2"
                  size="mini"
                  >消耗品</el-tag
                >
                <el-tag type="info" v-if="props.row.category == 3" size="mini"
                  >其它</el-tag
                >
                <el-tag
                  type="warning"
                  v-if="props.row.category == 4"
                  size="mini"
                  >设置</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="price" label="价格"> </el-table-column>
            <el-table-column prop="reqLevel" label="需求等级"></el-table-column>
            <el-table-column prop="maxDays" label="有效期"></el-table-column>
            <el-table-column prop="only" label="唯一性">
              <template slot-scope="props">
                <el-switch
                  style="display: block"
                  v-model="props.row.only"
                  @change="changeOnlyStatus(props.row.item_id)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="tradeBlock" label="可否交易">
              <template slot-scope="props">
                <el-switch
                  style="display: block"
                  v-model="props.row.tradeBlock"
                  @change="changeTradeStatus(props.row.item_id)"
                >
                </el-switch>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="120">
              <template slot-scope="props">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  @click="editItem(props.row.item_id)"
                ></el-button>
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="deleteItem(props.row.item_id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageConfig.currentPage"
              :page-sizes="pageConfig.pageSizes"
              :page-size="pageConfig.pageSize"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageConfig.pageTotal"
              :hide-on-single-page="false"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane lazy label="消耗" name="consume">
          <el-row>
            <el-col :span="8">
              <div class="grid-content search-container">
                <el-input
                  placeholder="请输入内容"
                  v-model.trim="searchCont"
                  clearable
                  class="search-input"
                  @clear="searchClear"
                >
                </el-input>
                <el-button
                  type="info"
                  plain
                  icon="el-icon-search"
                  @click="getItemList"
                ></el-button>
              </div>
            </el-col>
          </el-row>
          <el-table :data="itemList" border stripe style="width: 100%">
            <!-- <el-table-column type="index" label="#" width="48"></el-table-column> -->
            <el-table-column
              prop="item_id"
              label="ID"
              width="80"
            ></el-table-column>
            <el-table-column label="图标" align="center">
              <template slot-scope="props">
                <div v-if="props.row.item_icon">
                  <el-image :src="path + props.row.item_icon">
                    <span slot="error">无</span>
                  </el-image>
                </div>
                <div v-else>
                  无
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="item_name" label="名称" width="100">
            </el-table-column>
            <el-table-column
              prop="item_desc"
              label="描述"
              width="200"
            ></el-table-column>
            <el-table-column prop="category" label="分类">
              <template slot-scope="props">
                <el-tag v-if="props.row.category == 1" size="mini">特殊</el-tag>
                <el-tag
                  type="success"
                  v-if="props.row.category == 2"
                  size="mini"
                  >消耗品</el-tag
                >
                <el-tag type="info" v-if="props.row.category == 3" size="mini"
                  >其它</el-tag
                >
                <el-tag
                  type="warning"
                  v-if="props.row.category == 4"
                  size="mini"
                  >设置</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="price" label="价格"> </el-table-column>
            <el-table-column label="恢复HP">
              <template slot-scope="props">
                <div v-if="props.row.hp">{{ props.row.hp }}</div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column label="恢复MP">
              <template slot-scope="props">
                <div v-if="props.row.mp">{{ props.row.mp }}</div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column label="恢复百分比HP">
              <template slot-scope="props">
                <div v-if="props.row.hpR">{{ props.row.hpR }}%</div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column label="恢复百分比MP">
              <template slot-scope="props">
                <div v-if="props.row.mpR">{{ props.row.mpR }}%</div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column label="提升速度">
              <template slot-scope="props">
                <div v-if="props.row.speed">{{ props.row.speed }}%</div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column label="提升攻击力">
              <template slot-scope="props">
                <div v-if="props.row.acc">{{ props.row.acc }}%</div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column label="提升物理攻击">
              <template slot-scope="props">
                <div v-if="props.row.pad">{{ props.row.pad }}%</div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column label="提升物理防御">
              <template slot-scope="props">
                <div v-if="props.row.pdd">{{ props.row.pdd }}%</div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column label="提升魔法攻击">
              <template slot-scope="props">
                <div v-if="props.row.mad">{{ props.row.mad }}%</div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column label="提升魔法防御">
              <template slot-scope="props">
                <div v-if="props.row.mdd">{{ props.row.mdd }}%</div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column label="提升跳跃力">
              <template slot-scope="props">
                <div v-if="props.row.jump">{{ props.row.jump }}%</div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column label="增加力量">
              <template slot-scope="props">
                <div v-if="props.row.incSTR">{{ props.row.incSTR }}%</div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column label="增加敏捷">
              <template slot-scope="props">
                <div v-if="props.row.incDEX">{{ props.row.incDEX }}%</div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column label="增加智力">
              <template slot-scope="props">
                <div v-if="props.row.incINT">{{ props.row.incINT }}%</div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column label="增加运气">
              <template slot-scope="props">
                <div v-if="props.row.incLUK">{{ props.row.incLUK }}%</div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column label="传送至">
              <template slot-scope="props">
                <div v-if="props.row.moveTo">{{ props.row.moveTo }}%</div>
                <div v-else>无传送</div>
              </template>
            </el-table-column>
            <el-table-column label="获得经验值"
              ><template slot-scope="props">
                <div v-if="props.row.exp">{{ props.row.exp }}%</div>
                <div v-else>0</div>
              </template></el-table-column
            >
            <el-table-column prop="reqLevel" label="需求等级">
              <template slot-scope="props">
                <div v-if="props.row.reqLevel">{{ props.row.reqLevel }}%</div>
                <div v-else>无</div>
              </template>
            </el-table-column>
            <el-table-column prop="only" label="唯一性">
              <template slot-scope="props">
                <el-switch
                  style="display: block"
                  v-model="props.row.only"
                  @change="changeOnlyStatus(props.row.item_id)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="tradeBlock" label="可否交易">
              <template slot-scope="props">
                <el-switch
                  style="display: block"
                  v-model="props.row.tradeBlock"
                  @change="changeTradeStatus(props.row.item_id)"
                >
                </el-switch>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="120">
              <template slot-scope="props">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  @click="editItem(props.row.item_id)"
                ></el-button>
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="deleteItem(props.row.item_id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageConfig.currentPage"
              :page-sizes="pageConfig.pageSizes"
              :page-size="pageConfig.pageSize"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageConfig.pageTotal"
              :hide-on-single-page="false"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane lazy label="设置" name="ins">
          <el-row>
            <el-col :span="8">
              <div class="grid-content search-container">
                <el-input
                  placeholder="请输入内容"
                  v-model.trim="searchCont"
                  clearable
                  class="search-input"
                  @clear="searchClear"
                >
                </el-input>
                <el-button
                  type="info"
                  plain
                  icon="el-icon-search"
                  @click="getItemList"
                ></el-button>
              </div>
            </el-col>
          </el-row>
          <el-table :data="itemList" border stripe style="width: 100%">
            <!-- <el-table-column type="index" label="#" width="48"></el-table-column> -->
            <el-table-column
              prop="item_id"
              label="ID"
              width="80"
            ></el-table-column>
            <el-table-column label="图标" align="center">
              <template slot-scope="props">
                <div v-if="props.row.item_icon">
                  <el-image :src="path + props.row.item_icon">
                    <span slot="error">无</span>
                  </el-image>
                </div>
                <div v-else>
                  无
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="item_name" label="名称" width="100">
            </el-table-column>
            <el-table-column
              prop="item_desc"
              label="描述"
              width="200"
            ></el-table-column>
            <el-table-column prop="category" label="分类">
              <template slot-scope="props">
                <el-tag v-if="props.row.category == 1" size="mini">特殊</el-tag>
                <el-tag
                  type="success"
                  v-if="props.row.category == 2"
                  size="mini"
                  >消耗品</el-tag
                >
                <el-tag type="info" v-if="props.row.category == 3" size="mini"
                  >其它</el-tag
                >
                <el-tag
                  type="warning"
                  v-if="props.row.category == 4"
                  size="mini"
                  >设置</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="price" label="价格"> </el-table-column>
            <el-table-column prop="recoveryHP" label="恢复HP">
              <template slot-scope="props">
                <div v-if="props.row.recoveryHP">
                  {{ props.row.recoveryHP }}
                </div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column prop="recoveryMP" label="恢复MP">
              <template slot-scope="props">
                <div v-if="props.row.recoveryMP">
                  {{ props.row.recoveryMP }}
                </div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column prop="reqLevel" label="需求等级">
              <template slot-scope="props">
                <div v-if="props.row.reqLevel">{{ props.row.reqLevel }}</div>
                <div v-else>0</div>
              </template>
            </el-table-column>
            <el-table-column prop="maxDays" label="有效期">
              <template slot-scope="props">
                <div v-if="props.row.maxDays">{{ props.row.maxDays }}</div>
                <div v-else>无</div>
              </template>
            </el-table-column>
            <el-table-column prop="only" label="唯一性">
              <template slot-scope="props">
                <el-switch
                  style="display: block"
                  v-model="props.row.only"
                  @change="changeOnlyStatus(props.row.item_id)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="tradeBlock" label="可否交易">
              <template slot-scope="props">
                <el-switch
                  style="display: block"
                  v-model="props.row.tradeBlock"
                  @change="changeTradeStatus(props.row.item_id)"
                >
                </el-switch>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="120">
              <template slot-scope="props">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  @click="editItem(props.row.item_id)"
                ></el-button>
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="deleteItem(props.row.item_id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageConfig.currentPage"
              :page-sizes="pageConfig.pageSizes"
              :page-size="pageConfig.pageSize"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageConfig.pageTotal"
              :hide-on-single-page="false"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane lazy label="其它" name="other">
          <el-row>
            <el-col :span="8">
              <div class="grid-content search-container">
                <el-input
                  placeholder="请输入内容"
                  v-model.trim="searchCont"
                  clearable
                  class="search-input"
                  @clear="searchClear"
                >
                </el-input>
                <el-button
                  type="info"
                  plain
                  icon="el-icon-search"
                  @click="getItemList"
                ></el-button>
              </div>
            </el-col>
          </el-row>
          <el-table :data="itemList" border stripe style="width: 100%">
            <!-- <el-table-column type="index" label="#" width="48"></el-table-column> -->
            <el-table-column
              prop="item_id"
              label="ID"
              width="80"
            ></el-table-column>
            <el-table-column label="图标" align="center">
              <template slot-scope="props">
                <div v-if="props.row.item_icon">
                  <el-image :src="path + props.row.item_icon">
                    <span slot="error">无</span>
                  </el-image>
                </div>
                <div v-else>
                  无
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="item_name" label="名称" width="100">
            </el-table-column>
            <el-table-column
              prop="item_desc"
              label="描述"
              width="200"
            ></el-table-column>
            <el-table-column prop="category" label="分类">
              <template slot-scope="props">
                <el-tag v-if="props.row.category == 1" size="mini">特殊</el-tag>
                <el-tag
                  type="success"
                  v-if="props.row.category == 2"
                  size="mini"
                  >消耗品</el-tag
                >
                <el-tag type="info" v-if="props.row.category == 3" size="mini"
                  >其它</el-tag
                >
                <el-tag
                  type="warning"
                  v-if="props.row.category == 4"
                  size="mini"
                  >设置</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="price" label="价格"> </el-table-column>
            <el-table-column label="最大组数量">
              <template slot-scope="props">
                <div v-if="props.row.slotMax">
                  {{ props.row.slotMax }}
                </div>
                <div v-else>N/A</div>
              </template>
            </el-table-column>
            <el-table-column label="任务道具">
              <template slot-scope="props">
                <div>
                  <div v-if="props.row.quest">
                    <span v-if="props.row.quest == 1">是</span>
                  </div>
                  <div v-else>否</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="能否出售">
              <template slot-scope="props">
                <div>
                  <div v-if="props.row.notSale">
                    <span v-if="props.row.notSale == 1">是</span>
                  </div>
                  <div v-else>否</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="only" label="唯一性">
              <template slot-scope="props">
                <el-switch
                  style="display: block"
                  v-model="props.row.only"
                  @change="changeOnlyStatus(props.row.item_id)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="tradeBlock" label="可否交易">
              <template slot-scope="props">
                <el-switch
                  style="display: block"
                  v-model="props.row.tradeBlock"
                  @change="changeTradeStatus(props.row.item_id)"
                >
                </el-switch>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="120">
              <template slot-scope="props">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  @click="editItem(props.row.item_id)"
                ></el-button>
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="deleteItem(props.row.item_id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageConfig.currentPage"
              :page-sizes="pageConfig.pageSizes"
              :page-size="pageConfig.pageSize"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageConfig.pageTotal"
              :hide-on-single-page="false"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane lazy label="特殊" name="special">
          <el-row>
            <el-col :span="8">
              <div class="grid-content search-container">
                <el-input
                  placeholder="请输入内容"
                  v-model.trim="searchCont"
                  clearable
                  class="search-input"
                  @clear="searchClear"
                >
                </el-input>
                <el-button
                  type="info"
                  plain
                  icon="el-icon-search"
                  @click="getItemList"
                ></el-button>
              </div>
            </el-col>
          </el-row>
          <el-table :data="itemList" border stripe style="width: 100%">
            <!-- <el-table-column type="index" label="#" width="48"></el-table-column> -->
            <el-table-column
              prop="item_id"
              label="ID"
              width="80"
            ></el-table-column>
            <el-table-column label="图标" align="center">
              <template slot-scope="props">
                <div v-if="props.row.item_icon">
                  <el-image :src="path + props.row.item_icon">
                    <span slot="error">无</span>
                  </el-image>
                </div>
                <div v-else>
                  无
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="item_name" label="名称" width="100">
            </el-table-column>
            <el-table-column
              prop="item_desc"
              label="描述"
              width="200"
            ></el-table-column>
            <el-table-column prop="category" label="分类">
              <template slot-scope="props">
                <el-tag v-if="props.row.category == 1" size="mini">特殊</el-tag>
                <el-tag
                  type="success"
                  v-if="props.row.category == 2"
                  size="mini"
                  >消耗品</el-tag
                >
                <el-tag type="info" v-if="props.row.category == 3" size="mini"
                  >其它</el-tag
                >
                <el-tag
                  type="warning"
                  v-if="props.row.category == 4"
                  size="mini"
                  >设置</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="price" label="价格"> </el-table-column>
            <el-table-column prop="rate" label="倍率"> </el-table-column>
            <el-table-column prop="consumeHP" label="消耗HP"></el-table-column>
            <el-table-column prop="consumeMP" label="消耗MP"></el-table-column>
            <el-table-column prop="reqLevel" label="需求等级"></el-table-column>
            <el-table-column prop="maxDays" label="有效期"></el-table-column>
            <el-table-column prop="only" label="唯一性">
              <template slot-scope="props">
                <el-switch
                  style="display: block"
                  v-model="props.row.only"
                  @change="changeOnlyStatus(props.row.item_id)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="tradeBlock" label="可否交易">
              <template slot-scope="props">
                <el-switch
                  style="display: block"
                  v-model="props.row.tradeBlock"
                  @change="changeTradeStatus(props.row.item_id)"
                >
                </el-switch>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="120">
              <template slot-scope="props">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  @click="editItem(props.row.item_id)"
                ></el-button>
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="deleteItem(props.row.item_id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageConfig.currentPage"
              :page-sizes="pageConfig.pageSizes"
              :page-size="pageConfig.pageSize"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageConfig.pageTotal"
              :hide-on-single-page="false"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 搜索内容
      searchCont: '',
      // 当前分类
      category: 0,
      // 怪物列表数据
      itemList: [],
      // 资源路径
      path: '',
      // 分页器参数配置
      pageConfig: {
        pageTotal: 0, // 分页器总条数
        pageSize: 10, // 每页显示条数
        pageSizes: [10, 15, 20, 25], // 可选择的每页条数
        currentPage: 1 // 分页器当前页码
      }
    };
  },
  methods: {
    getItemList () {
      // 获取物品列表
      // 打开加载层
      var loading = this.$loading.service(this.$store.state.loadingConfig);
      this.$axios
        .get('/itemList/' + this.category, {
          params: {
            search: this.searchCont.trim(),
            pagenum: this.pageConfig.currentPage,
            pagesize: this.pageConfig.pageSize
          }
        })
        .then(res => {
          if (res.status === 0) {
            // 处理数据
            res.data.forEach(item => {
              item.only = item.only === 1;
              item.tradeBlock = item.tradeBlock === 0;
            });
            // 设置分页
            this.pageConfig.pageTotal = res.total;
            this.pageConfig.currentPage = res.pagenum;
            // 设置数据
            this.itemList = res.data;
            this.path = res.path;
            // 判断当前页是否为空
            if (
              this.pageConfig.pageTotal ===
              (this.pageConfig.currentPage - 1) * this.pageConfig.pagesize
            ) {
              if (this.pageConfig.currentPage - 1 < 1) {
                this.handleCurrentChange(1);
              } else {
                this.handleCurrentChange(this.pageConfig.currentPage - 1);
              }
            }
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          // 请求失败
          this.$message.error(error);
        })
        .finally(() => {
          // 关闭加载层
          this.$nextTick(() => {
            loading.close();
          });
        });
    },
    changeOnlyStatus (id) {
      // 切换是否唯一性
    },
    changeTradeStatus (id) {
      // 切换是否可交易
    },
    editItem (id) {
      // 编辑物品
    },
    deleteItem (id) {
      // 删除物品
    },
    switchTag (activeName, oldActiveName) {
      switch (activeName) {
        case 'all':
          this.category = 0;
          break;
        case 'special':
          this.category = 1;
          break;
        case 'consume':
          this.category = 2;
          break;
        case 'other':
          this.category = 3;
          break;
        case 'ins':
          this.category = 4;
          break;
        default:
          break;
      }
      console.log(this.category);
      this.getItemList();
    },
    handleSizeChange (val) {
      // 切换每页条数重新获取数据
      this.pageConfig.pageSize = val;
      this.getItemList();
    },
    handleCurrentChange (val) {
      // 切换页码时重新获取数据
      this.pageConfig.currentPage = val;
      this.getItemList();
    },
    searchClear () {
      this.getItemList();
    }
  },
  mounted () {
    this.getItemList();
  }
};
</script>

<style></style>
